<template>
	<el-button type="primary" @click="open()">开的弹窗</el-button>
</template>
<script lang="ts" setup>
	import { reactive, getCurrentInstance } from 'vue';

	import {
		bankCardFormat,
		cardFormat,
		isCard,
		isMobile,
		isSMs,
		mobileFormat,
		noNumericToBlank,
	} from '@fe-hl/utils';

	// 快捷选择
	const shortcuts = [
		{
			text: '一周内',
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				return [start, end];
			},
		},
		{
			text: '一个月内',
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				return [start, end];
			},
		},
		{
			text: '三个月内',
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				return [start, end];
			},
		},
		{
			text: '一年内',
			value: () => {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
				return [start, end];
			},
		},
	];
	// 直接范围一年内，不能过过当前时间
	const disabledDate = (time: Date) => {
		const curDate = new Date().getTime();
		const three = 365 * 24 * 3600 * 1000;
		const threeMonths = curDate - three;
		return time.getTime() > Date.now() || time.getTime() < threeMonths;
	};

	const Instance: any = getCurrentInstance()?.proxy;

	const formConfig = reactive({
		handlerUpload: async (file, formConfig) => {
			console.log(formConfig);
			const formData = new FormData();
			formData.append('file', file.file);
			return Promise.resolve();
		},
		handlerSubmit: formModels => {
			console.log(formModels);
			return Promise.resolve();
		},
		formModelValues: {
			mobilePhone: '17621959589',
		},
		formConfigList: [
			{
				componentType: 'text',
				label: '手机号格式化',
				type: 'text',
				placeholder: '请输入手机号',
				key: 'mobilePhone',
				formatter: mobileFormat,
				maxlength: 13,
				rules: [
					{
						required: false,
						message: '请输入合法的11位手机号',
						validator: (rule, value, callback) => {
							if (!isMobile(value.replace(/\s/gi, ''))) {
								callback(new Error('请输入合法的11位手机号'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				label: '身份证',
				type: 'text',
				placeholder: '请输入身份证',
				key: 'card',
				formatter: cardFormat,
				maxlength: 20,
				rules: [
					{
						required: false,
						message: '请输入合法18位身份证号',
						validator: (rule, value, callback) => {
							if (!isCard(value.replace(/\s/gi, ''))) {
								callback(new Error('请输入合法18位身份证号'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				label: '银行卡号',
				type: 'text',
				placeholder: '请输入银行卡号',
				key: 'bankCard',
				formatter: bankCardFormat,
				maxlength: 24,
				rules: [{ required: true, message: '请输入银行卡号' }],
			},
			{
				label: '验证码',
				componentType: 'sms',
				type: 'text',
				formatter: noNumericToBlank,
				placeholder: '请输入验证码',
				beforeValidateKey: ['mobilePhone'],
				key: 'smsCode',
				handlerCountdown: countdown => {
					countdown();
				},
				maxlength: 6,
				rules: [
					{
						required: false,
						message: '请输入6位数字验证码',
						validator: (rule, value, callback) => {
							if (!isSMs(value)) {
								callback(new Error('请输入6位数字验证码'));
							} else {
								callback();
							}
						},
					},
				],
			},
			{
				componentType: 'text',
				type: 'text',
				label: '商户号',
				formatter: noNumericToBlank,
				placeholder: '请输入商户号',
				key: 'mercId',
				rules: [{ required: false, message: '请输入商户号' }],
			},
			{
				componentType: 'switch',
				label: '状态',
				defaultValue: true,
				key: 'off',
			},
			{
				componentType: 'checkbox',
				label: '复选',
				key: 'checkboxs',
				rules: [{ required: false, message: '请选择复选框组' }],
				options: [
					{
						label: '男',
						value: 1,
					},
					{
						label: '女',
						value: 2,
					},
				],
			},
			{
				componentType: 'radio',
				label: '单选',
				key: 'radio',
				defaultValue: 'm',
				rules: [{ required: false, message: '请选择单选' }],
				options: [
					{
						label: '男',
						value: 's',
					},
					{
						label: '女',
						value: 'm',
					},
				],
			},
			{
				componentType: 'stepper',
				label: '步进器',
				key: 'stepper',
			},
			{
				componentType: 'rate',
				label: '评分',
				key: 'rate',
			},
			{
				componentType: 'slider',
				label: '滑块',
				key: 'slider',
			},
			{
				componentType: 'select',
				label: '选择城市',
				placeholder: '选择城市',
				key: 'city',
				confirmCallback: (formModel, formModels, opt) => {
					console.log(formModel);
					console.log(formModels);
					console.log(opt);
				},
				options: [
					{ label: '杭州', value: 'Hangzhou' },
					{ label: '宁波', value: 'Ningbo' },
					{ label: '温州', value: 'Wenzhou' },
					{ label: '绍兴', value: 'Shaoxing' },
					{ label: '湖州', value: 'Huzhou' },
				],
				rules: [{ required: false, message: '选择城市' }],
			},
			{
				componentType: 'select',
				label: '选择城市模糊查询',
				placeholder: '选择城市',
				key: 'cityFuzzy',
				remote: true,
				getOptions: () => {
					const list = [
						{ label: '杭州1222', value: 'Hangzhou' },
						{ label: '宁波2', value: 'Ningbo' },
						{ label: '温州', value: 'Wenzhou' },
						{ label: '绍兴', value: 'Shaoxing' },
						{ label: '湖州', value: 'Huzhou' },
					];
					return Promise.resolve(list);
				},
				confirmCallback: (formModel, formModels, opt) => {
					console.log(formModel);
					console.log(formModels);
					console.log(opt);
				},
				rules: [{ required: false, message: '选择城市' }],
			},
			{
				componentType: 'date',
				type: 'daterange',
				dateFormat: 'YYYY-MM-DD',
				label: '时间选择',
				placeholder: '选择时间选择',
				shortcuts: shortcuts,
				disabledDate: disabledDate,
				key: 'dateRange',
				rules: [{ required: false, message: '选择时间选择' }],
			},
			{
				componentType: 'uploader',
				label: '文件上传',
				maxCount: 5,
				key: 'uploader',
				tip: 'jpg/png files with a size less than 2000KB',
				rules: [{ required: false, message: '请选择文件上传' }],
				beforeRead: file => {
					console.log(file);
					// 可拦截
					return true;
				},
			},
		],
	});

	const open = () => {
		Instance.$AdDialogForm({
			title: '新增',
			formConfig: formConfig,
		});
	};
</script>
